<template>
	<view class="nav">
		<!-- is-fixed 是否固定在头部 -->
		<u-navbar
			:autoBack="true"
		>
			<view slot="center" class="nav-center">
				{{ title }}
			</view>
			<view slot="right" class="nav-right">
				<u-icon name="search" size="22"></u-icon>
				<u-icon name="shopping-cart" size="22"></u-icon>
			</view>
		</u-navbar>
		<!-- 筛选条件 -->
		<view class="filter-box">
			<view v-for="item in filterList" :key="item.id">
				<view 
				class="filter-title"
				:class="current == item.id ? 'active' : ''"
				@click="changeFilter(item.id)"
				>
					{{ item.title }}
				</view>
			</view>
		</view>
		<!-- 课程列表 -->
		<view class="re-all">
			<!-- 课程列表 -->
			<scroll-view scroll-y="true" :style="'height:' + height + 'px'" @scrolltolower="loadingMore">
				<view class="new-list">
					<view class="new-list-item" v-for=" item in courseList">
						<view class="list-item-img">
							<img :src="item.courseCover" mode=""></img>
						</view>
						<view class="list-item-info">
							<view class="info-title">
								{{ item.courseName }}
							</view>
							<view class="info-type">
								{{ courseType(item.courseLevel) }}
							</view>
							<view class="info-detail">
								<view class="info-detail-price" v-if="item.salePrice == 0">
										免费
								</view>
								<view class="info-detail-price" v-else>
									<view>
										限时优惠
									</view>
									<view>
										￥ {{ item.salePrice }}
									</view>
								</view>
								<view class="info-detail-count">
									{{ courseNumber(item.clicks) }}人学习
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	// 暂时引入courseList接口看效果
	import { getCourse } from '../../api/course.js'
	// 引入混入
	import { mixins } from '../../mixins/mixins.js'
	
	export default {
		mixins:[mixins],
		data() {
			return {
				title:'',
				filterList:[
					{id:0,title:'综合'},
					{id:1,title:'最新课程'},
					{id:2,title:'浏览推荐'}
				],
				current:0,
				courseList:[],
				height:0,
				courseParams:{ 
					pageNum:1,
					pageSize:10,
					entity:{
						sortBy:"" ,
						courseName:""
					}
				},
				isTabs:false
			}
		},
		onLoad(e) {
			this.title = e.key,
			// 根据课程名字请求课程列表
			this.courseParams.entity.courseName = e.key
			this.getAllSee()
		},
		onReady() {
			this.height = this.getHeight('.u-navbar__content','.filter-box') + 30
		},
		methods:{
			changeFilter(id) {
				this.current = id
				// 让isTabs为true
				this.isTabs = true
				// 切换了，页数变更为1
				this.courseParams.pageNum = 1
				// 根据筛选条件变更请求参数的值
				switch(id) {
					case 0:
					this.courseParams.entity.sortBy = '';
					break;
					case 1:
					this.courseParams.entity.sortBy = 'time-desc';
					break;
					case 2:
					this.courseParams.entity.sortBy = 'clicks-desc';
				}
				this.getAllSee()
			},
			getAllSee() {
			// 获取课程 由于接口数据需要token暂时无法获取到服务器的数据
				getCourse(this.courseParams).then(res => {
					if (this.isTabs) {
						this.courseList = res.pageInfo.list
					}else {
						this.courseList = [...this.courseList,...res.pageInfo.list]
					}
				})
			},
			loadingMore() {
				this.isTabs = false
				this.courseParams.pageNum++
				this.getAllSee()
			}
		}
	}
</script>

<style>
	.nav-center {
		font-size: 38rpx;
	}
	.nav-right {
		display: flex;
	}
	.filter-box {
		padding-top: 88rpx;
		display: flex;
		justify-content: space-between;
	}
	/* 筛选条件的样式 */
	.filter-title {
		padding: 0 33rpx;
		font-size: 26rpx;
		font-weight: 400;
		color:#A0A4AD;
	}
	.filter-title.active {
		color: #0648FF;
		font-weight: 600;
	}
	.list-item {
		display: flex;
	}
	/* list样式 */
	.new-list-item {
		display: flex;
		align-items: center;
		position: relative;
		margin-top: 40rpx;
		padding: 14rpx;
	}
	.new-list-item:first-child {
		margin-top: 20rpx;
	}
	.new-list-item::after {
		content: '';
		position: absolute;
		border-bottom: 1px solid #000;
		width: 100%;
		bottom: -20rpx;
		margin-top: 20rpx;
		opacity: 0.15;
	}
	.list-item-img img {
		width: 237rpx;
		height: 186rpx;
		border-radius: 12rpx;
		background-color: #ccc;
	}
	.list-item-info {
		display: flex;
		flex-direction: column;
		height: 186rpx;
		width: 100%;
		padding-left: 23rpx;
		justify-content: space-between;
	}
	.info-title {
		font-size: 29rpx;
		color: #191919;
		font-weight: 400;
	}
	.info-type {
		font-size: 24rpx;
		color: #c5c5c5;
		font-weight: 400;
	}
	.info-detail {
		display: flex;
		justify-content: space-between;
	}
	.info-detail-price {
		display: flex;
		color: #FF4B5C;
		font-size: 21rpx;
		font-weight: 600;
	}
	.info-detail-count {
		font-size: 21rpx;
		font-weight: 400;
		color: #A0A4AD;
		justify-content: space-between;
	}
	/* 去除scrollbar底部的滚动条 */
	/deep/ ::-webkit-scrollbar {
		display: none;
	}
</style>